<template>
  <div id="main_div">
    <el-row :gutter="10">
      <el-col :span="2"></el-col>
      <el-col :span="20">

        <p style="color: rgb(125,125,125);font-size: 15px;margin-left: -1100px"><el-icon><HomeFilled /></el-icon>  资料 / 商品 / 商品库</p>
        <el-card style="margin-top: 20px;" class="box-card">
          <div style="float: left">
            <el-button style="width: 80px;border-radius:0" type="primary">新增</el-button>
            <el-button style="width: 80px;border-radius:0" type="primary">批量操作</el-button>
            <el-button style="width: 80px;border-radius:0" type="primary">导入</el-button>
            <el-button style="width: 80px;border-radius:0" type="primary">导出</el-button>
          </div>
          <br><br><br>
          <el-row :gutter="2">
            <el-col :span="2" style="float: left;font-size: 14px;margin-top:6px">商品分类</el-col>
            <el-col :span="4" style="float: left">
              <el-cascader
                v-model="value"
                :options="options"
                :props="props"
                @change="handleChange"
                placeholder="请选择..."
            /></el-col>
            <el-col :span="2" style="float: left;font-size: 14px;margin-top:6px">创建日期</el-col>
            <el-col :span="2">
              <div class="block">
                <el-date-picker
                    v-model="value1"
                    type="datetime"
                    placeholder="选择创建时间..."
                />
              </div></el-col>
            <el-col :span="10">
              <el-input v-model="wd" placeholder="请输入搜索的关键字" style="width: 300px;float: right;">
            </el-input></el-col>
            <el-col :span="1"><el-button @click="search()" style="width: 60px;float: left;border-radius:0" type="primary">搜索</el-button></el-col>
            <el-col :span="3"><el-button style="width: 60px;float: left;margin-left: 20px;border-radius:0">重置</el-button></el-col>
          </el-row>
          <br><br><br>
          <div>
<!--            表格-->
            <el-table  stripe style="width: 100%;">
              <el-table-column  prop="date" label="创建时间" width="100" />
              <el-table-column prop="id" label="单据编号" width="100" />
              <el-table-column prop="commodity_name" label="商品名称" width="180"/>
              <el-table-column prop="produced_img" label="商品图片" width="100"/>
              <el-table-column prop="category" label="商品分类" width="100"/>
              <el-table-column prop="specifications" label="属性规格" width="100"/>
              <el-table-column prop="measuring_unit" label="库存单位" width="100" />
              <el-table-column prop="price" label="销售价格" width="100"/>
              <el-table-column prop="state" label="状态" width="100"/>
              <el-table-column label="操作" width="200px">
                <template #default="scope">
                  <el-button type="success" >编辑</el-button>
                  <el-button type="success" >详细</el-button>
                  <el-button type="danger" >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
<!--            分页栏-->
            <el-pagination style="float: right" background layout="prev, pager, next" :total="1000"/>
          </div>
          <br><br><br>
        </el-card>
      </el-col>
      <el-col :span="2"></el-col>
    </el-row>
    <p style="color: #cbcbcb">@天大中心项目09班</p>
  </div>
</template>

<script setup>
import {ref} from 'vue'




const wd=ref('');

const value = ref([])
const value1 = ref('')
const props = {
  expandTrigger: 'hover'
}


const options = [
  {
    value: 'guide',
    label: '衣服',
    children: [
      {
        value: 'disciplines',
        label: '裤子',
        children: [
          {
            value: 'consistency',
            label: '七分裤',
          },
          {
            value: 'feedback',
            label: '短裤',
          },
          {
            value: 'efficiency',
            label: '工装裤',
          },
          {
            value: 'controllability',
            label: '九分裤',
          }
        ]
      },
      {
        value: 'disciplines',
        label: '上衣',
        children: [
          {
            value: 'consistency',
            label: '卫衣',
          },
          {
            value: 'feedback',
            label: '毛衣',
          },
          {
            value: 'efficiency',
            label: '羽绒服',
          },
          {
            value: 'controllability',
            label: '大衣',
          }
        ]
      }
    ]
  },
  {
    value: 'guide',
    label: '电器',
    children: [
      {
        value: 'disciplines',
        label: '家用',
        children: [
          {
            value: 'consistency',
            label: '微波炉',
          },
          {
            value: 'feedback',
            label: '冰箱',
          },
          {
            value: 'efficiency',
            label: '电饭锅',
          },
          {
            value: 'controllability',
            label: '热水壶',
          }
        ]
      }
    ]
  },
]

</script>

<style scoped>
#main_div {
  overflow: hidden;
  height: 720px;
  background-color: #f5f9ff;
  background-size: cover; /*设置封面尺寸*/
  background-position: center; /*设置背景图片居中*/

}
</style>